<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content" class="section page-content">

    <link href="/pc/css/bottlecms-dialogue.css" rel="stylesheet" />
    <style type="text/css">
        .dialogue-head .handle .title { font-size:24px; line-height: 1; height: 30px; width: 30px; }
        .dialogue-head .handle:hover .child{ display: block; }
        .dialogue-head .handle .child{
            display: none;
            position: absolute;
            right: 10px;
            top: 40px;
            min-width: 100%;
            line-height: 30px;
            padding: 5px 0;
            box-shadow: 0 5px 14px rgba(0,0,0,.2);
            border: 1px solid #FFF;
            background-color: #fff;
            z-index: 100;
            border-radius: 2px;
            white-space: nowrap;
            border-radius: 10px;
        }
        .dialogue-head .handle .child a {
            display: block;
            padding: 0 20px;
            color: #666;
            transition: all .3s;
            -webkit-transition: all .3s;
        }
        .dialogue-head .handle .child a:hover{
            color: var(--color);
        }

        @media (min-width :769px) {
            .chat_listdetail { width: 600px; }
            .chat_listdetail .dialogue-head .tit { display: unset; }
            .chat_listdetail .bcui-dialogue { width: 100% ; }
        }

    </style>
    <!-- e: 导航 -->
    <section class="section page-content">
        <div class="layui-main clearfix">
            <div class="chatwarp _shadow chat_listdetail">

                <div class="bcui-dialogue">
                    <div class="dialogue-head">
                        <a class="l" href="javascript:history.back(-1);"><i class="icon-return"></i></a>
                        <span class="tit">系统消息</span>

                    </div>
                    <div class="dialogue-main">

                        <ul class="chatList chat_list" id="chat_list"><li class="time">2020-12-30 17:43</li><li class="item you   word_type1" data-type="1" data-id="1308">   <div class="uinfo"><img src="https://demo.bottlecms.com/bc-application/Common/Assets/common/img/admin_photo.png?x-oss-process=image/resize,m_fill,h_200,w_200"></div>   <div class="dialogbox"><p class="talk">恭喜你成注册成功</p></div>   <div class="state"></div></li><li class="time">2021-01-22 07:15</li><li class="item you   word_type1" data-type="1" data-id="1410">   <div class="uinfo"><img src="https://demo.bottlecms.com/bc-application/Common/Assets/common/img/admin_photo.png?x-oss-process=image/resize,m_fill,h_200,w_200"></div>   <div class="dialogbox"><p class="talk">大哥哥心动了你，快去看看吧～</p></div>   <div class="state"></div></li></ul>
                    </div>
                    <div class="dialogue-send">

                        <div class="dialogue-speak">
                            <form>
                                <div class="voicebox">
                                    <div class="d-btn voice js_voicebtn">
                                        <i class="icon-voice">
                                        </i>
                                    </div>
                                    <div class="d-btn keyboard js_keyboardbtn">
                                        <i class="icon-keyboard">
                                        </i>
                                    </div>
                                </div>
                                <div class="voicetalkbox">
                                    <div class="voicetalkpop"><div class="ico"></div>可以说话了</div>
                                    <div class="voicebtn js_holdvoice">按住 说话</div>
                                </div>
                                <div class="talkbox">
                                    <textarea class="talk_area" id="talk_area"></textarea>
                                    <span class="provide hide" id="provide">
                                    6/240字
                                </span>
                                </div>
                                <div class="btnbox">
                                    <div class="d-btn js_emoticonbtn">
                                        <i class="icon-emoticon">
                                        </i>
                                    </div>
                                    <div class="d-btn js_imagebtn  bcui-upload-box _cp">
                                        <i class="icon-image">
                                        </i>
                                        <input type="file" class="js-uppic" accept="image/*">
                                    </div>
                                    <div class="d-btn js_videobtn bcui-upload-box _cp">
                                        <i class="icon-video">
                                        </i>
                                        <input type="file" class="js-upvideo" accept="video/*">
                                    </div>

                                    <div class="d-btn js_morebtn">
                                        <i class="icon-more">
                                        </i>
                                    </div>



                                    <div class="d-btn sendbtn js_sendbtn _cp">
                                    <span>
                                        发送
                                    </span>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="dialogue-tool">
                            <div class="item image">
                                <div class="_cp js_imagebtn bcui-upload-box" id="js_imagebtn">
                                    <div class="icon">
                                        <i class="icon-bottlecms-31"></i>
                                    </div>
                                    <div class="tit">
                                        图片
                                    </div>
                                    <input type="file" class="js-uppic" accept="image/*">
                                </div>
                            </div>
                            <div class="item video">
                                <div class="_cp js_videobtn bcui-upload-box" id="js_videobtn">
                                    <div class="icon">
                                        <i class="icon-bottlecms-14">
                                        </i>
                                    </div>
                                    <div class="tit">
                                        视频
                                    </div>
                                    <input type="file" class="js-upvideo" accept="video/*">
                                </div>
                            </div>
                            <div class="item gift">
                                <div class="_cp js_giftbtn" id="js_giftbtn">
                                    <div class="icon">
                                        <i class="icon-bottlecms-82"></i>
                                    </div>
                                    <div class="tit">
                                        礼物
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="dialogue-emot _shadow">
                            <ul class="emotbox js_emotbox"><li data-val="[/鄙视/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/despise.gif"></li><li data-val="[/闭嘴/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/shutup.gif"></li><li data-val="[/大笑/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/laugh.gif"></li><li data-val="[/发呆/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/blankly.gif"></li><li data-val="[/奋斗/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/struggle.gif"></li><li data-val="[/愤怒/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/anger.gif"></li><li data-val="[/害羞/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/shy.gif"></li><li data-val="[/憨笑/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/sillysmile.gif"></li><li data-val="[/汗/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/sweat.gif"></li><li data-val="[/惊讶/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/surprised.gif"></li><li data-val="[/囧/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/embarrassed.gif"></li><li data-val="[/骷髅/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/skeleton.gif"></li><li data-val="[/困/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/sleepy.gif"></li><li data-val="[/脸红/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/blush.gif"></li><li data-val="[/流泪/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/tears.gif"></li><li data-val="[/难过/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/sad.gif"></li><li data-val="[/亲/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/kiss.gif"></li><li data-val="[/耍酷/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/cool.gif"></li><li data-val="[/睡觉/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/sleep.gif"></li><li data-val="[/挑眉/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/eyebrows.gif"></li><li data-val="[/吐舌/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/tongue.gif"></li><li data-val="[/微笑/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/smile.gif"></li><li data-val="[/无辜/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/innocent.gif"></li><li data-val="[/无语/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/speechless.gif"></li><li data-val="[/眩晕/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/vertigo.gif"></li><li data-val="[/眼睛发光/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/shine.gif"></li><li data-val="[/疑问/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/doubt.gif"></li><li data-val="[/猪头/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/pighead.gif"></li><li data-val="[/左顾右盼/]"><img src="https://demo.bottlecms.com/bc-application/Home/Assets/Home/img/dialogue/emot/lookaround.gif"></li></ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

</div>
<div layout:fragment="contentFooter">
    <script type="text/javascript">
        $(document).ready(function($) {
            var _page = $('.page');

            var user_obj = JSON.parse($(_page).find('input[name=user_obj]').val());
            var target_obj = JSON.parse($(_page).find('input[name=target_obj]').val());
            if (!target_obj.user_id || !target_obj.user_id) {
                return bottlecms.toast("信息错误");
            }
            var dialogue = null;
            dialogue = bottlecms.dialogue.init({
                elem: $(_page).find(".bcui-dialogue"),
                me: user_obj,
                he: target_obj,
                action: "notice"
            });
        });
    </script>
</div>
</html>